<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		 <script src="../../js/vue.min.js"></script>
	</head>
	<body>
		
		<!--3.使用v-html 和v-text (主要使用输出未解析的HTML和文本的)
		解释：v-text将数据解析为纯文本
		解释：v-html将数据解析成html标签
		这里v是vue的前缀，text是指令ID，msg是expression。 
		msg作为ViewModel，当它的值发生改变时，就触发指令text，
		重新计算标签的textContent(innerText)
		-->
		
		<div id="root">	 
		<p v-text="msg">v-text是不会解析html标签的</p>	 
		<p v-html="name">v-html是会解析html标签的</p> 
		<p>苹果的价格为{{ msg }}元</p>
		</div>
		 
		<script>
		//实例化Vue对象
		new Vue({
		// 挂载点(用来绑定与元素的)
		el: '#root',
		// 数据对象(自定义数据对象)
		data:{
		msg:'vue',
		name:'<h1>mclink</h1>',
		}
		})
		</script>
		

		
	</body>
</html>
